Dashboard


Los dashboards o tableros de Quarto son archivos HTML que pueden ser:

  • Estáticos Se representan una sola vez y los datos no cambian - pueden incluir elementos dinámicos.

  • Programados Se representan a partir de un cronograma donde los datos se actualizan

  • Parametrizados Se modifican a partir de parámetros

  • Interactivo Mediante Shiny - requieren de servidor especial

Cabecera YAML


El formato de la cabecera YAML de los tableros de Quarto es dashboard.


---
title: "Mi tablero"
format: dashboard
---


La salida generada es HTML y la estructura se asemeja al uso del paquete flexdashboard de RMarkdown.

Se puede definir como será la orientación y si se habilita el scrolling de la página.

Otras opciones específicas de la cabecera YAML para tableros son los logotipos y los botones de navegación.

Cabecera YAML

Se reconocen alias para botones especiales predeterminados: linkedin, facebook, reddit, twitter y github. También se pueden crear botones personalizados a partir de íconos bootstrap.

    logo: images/INE.gif
    nav-buttons: 
      - linkedin
      - twitter
      - github
      - facebook
      - reddit
      - icon: hospital
        href: https://www.ine.gov.ar
        target: _blank

Componentes

Los tableros constan de varios componentes:

Barra de navegación: ícono, título y autor junto con enlaces a subpáginas (si se define más de una página).

Páginas, filas, columnas y conjuntos de pestañas: las páginas, filas y columnas se definen mediante encabezados de Markdown (con atributos opcionales para controlar la altura, el ancho, etc.). Los conjuntos de pestañas se pueden utilizar para dividir aún más el contenido dentro de una fila o columna.

Tarjetas, barras laterales y barras de herramientas: las tarjetas son contenedores para gráficos, visualización de datos y contenido de formato libre. El contenido de las tarjetas generalmente se asigna a celdas en el documento fuente. Las barras laterales y las barras de herramientas se utilizan para presentar entradas dentro de tableros interactivos.

Diseño

Los elementos de diseño básico son paginas, filas, columnas y pestañas.

Las paginas se definen con encabezados tamaño 1 (#)

Las filas y columnas se declaran con encabezados tamaño 2 (##)

Las pestañas utilizan la clase {.tabset} en filas tipo ## y cada pestaña se declara con un encabezado de tamaño 3 (###)

Páginas


# Pagina 1 

# Pagina 2 

# Pagina 3 


Filas


## Row {height=30%}

::: {.card title="Fila 30%"}
:::

## Row {height=70%}

::: {.card title="Fila 70%"}
:::

Columnas


## Column {width=30%}

::: {.card title="Columna 30%"}
:::

## Column {width=70%}

::: {.card title="Columna 70%"}
:::

Pestañas


## Row {.tabset}

### Pestaña 1

::: {.card title=""}
:::

### Pestaña 2

::: {.card title=""}
:::

Barra lateral


Tarjetas


Las tarjetas que se ubican en las celdas que generan las filas, las columnas y/o las pestañas tienen un botón de expansión automático que maximiza la visualización.

Tarjetas - texto

Cajas de valor

Tablas desde código

Gráficos desde código

Componentes interactivos

htmlwidgets